<template>
  <div class="bg-[#F2F4F5]">
    <div class=" h-[40px] flex items-center justify-between max-w-[1440px]" style="margin: 0 auto; font-size: 14px">
      <div v-if="store.userInfo.user_name">
        欢迎您：{{ store.userInfo.user_name }}~
      </div>
      <div class="cursor-pointer" @click="outlogin" v-if="store.userInfo.user_name">
        安全退出
      </div>
      <div class="cursor-pointer" @click="router.push('/index/login')" v-else>
        请登录
      </div>
    </div>
  </div>
  <div class=" bg-white h-[70px] flex items-center justify-between max-w-[1440px]" style="margin: 0 auto">
    <div class="flex items-center">
      <el-image @click="router.push('/index/home')" :src="getAssetsFile('home/logo.png')"
        class="w-[66px] h-[50px] cursor-pointer"></el-image>
    </div>
    <div class="flex">
      <div v-for="item in tabs" class="ml-[30px] cursor-pointer" style="font-size: 17px" @click="clickTabs(item.name)">
        <div class="flex flex-col justify-center items-center" :class="{
          'text-[#EF6800] font-bold': item.isActive,
        }">
          <span>{{ item.name }}</span>
          <div class="w-[50px] mt-[14px]" :class="{
            'border-b-[3px] border-[#EF6800]': item.isActive,
          }"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, inject, watchEffect } from "vue";
import { useRouter, useRoute } from "vue-router";
import { indexUser, outLogin } from "@/utils/api";
import getAssetsFile from "@/utils/getImageurl.ts";
import { useUserStore } from "@/store/index";
import { ElMessage, ElMessageBox } from "element-plus";
const store = useUserStore();
interface tabType {
  name: string;
  isActive: boolean;
}
const tabs = ref<tabType[]>([
  { name: "产品中心", isActive: false },
  { name: "个人中心", isActive: false },
]);
const router = useRouter();
const route = useRoute();
const message = inject<any>("message");

const getData = async () => {


  for (let i in tabs.value) {
    if (tabs.value[i].name == route.matched[0].meta.title) {
      tabs.value[i].isActive = true;
    }
  }
  const res = await indexUser("");
  store.$patch({
    userInfo: res.msg,
  });
};
getData();
const clickTabs = (name: string) => {
  for (let i in tabs.value) {
    if (tabs.value[i].name == name) {
      tabs.value[i].isActive = true;
    } else {
      tabs.value[i].isActive = false;
    }
  }

  if (name == "个人中心") {
    // router.push("/index/person");
    router.push(`/index/person/orderPay?type=0&parentIndex=0`);
  } else {
    router.push("/index/home");
  }
};
//退出登录=>
const outlogin = async () => {
  ElMessageBox.confirm("确认退出登录吗?", "退出登录", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await outLogin("");

      if (res.code == 1) {
        message.success(res.msg);
        store.userInfo.user_name = "";
        router.push("/index/login");
      } else {
        message.info(res.msg);
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消",
      });
    });
};
watchEffect(() => {
  if (route) {
    if (route.matched[0].meta.title == "产品中心") {
      tabs.value[0].isActive = true;
      tabs.value[1].isActive = false;
    } else if (route.matched[0].meta.title == "个人中心") {
      tabs.value[1].isActive = true;
      tabs.value[0].isActive = false;
    }
  }
});
</script>
